<template>
  <div>
    <el-table ref="disabledProductTable"
              style="width:100%;"
              height="600px"
              row-key="id"
              :data="productDisplayList">
      <el-table-column :prop="index"
                       :label="item"
                       v-for="(item , index) in tableColumnList"
											 :key="index"
											 >
        <template slot-scope="scope">
          <div v-if="item ==`封面主图`">
            <el-image    :src="scope.row.productCoverImage"       style="width: 100px; height: 100px"  >
              <div slot="error"
                   class="image-slot">
                <i>暂无图片</i>
              </div>
            </el-image>

          </div>
          <div v-else-if="item ==`状态`">
            <el-tag size="medium"
                    v-if="scope.row.productStatus==1">展示中
            </el-tag>
          </div>
          <div v-else-if="item == `商品类型`">
            <span v-if="scope.row.categoryBean != null ">{{scope.row.categoryBean.name}}</span>
          </div>
          <div v-else-if="item ==`主页显示`">
            <el-switch v-model="scope.row.isHome"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value="1"
                       :inactive-value="0"
                       @change="changeHomeDisplay(scope.row)">
            </el-switch>
          </div>
					<div v-else-if="item == `操作`">
						     <el-button type="primary"
                       @click="removeAudit(scope.row)"
                       >撤销审核</el-button>
					</div>
          <div v-else>
            {{scope.row[index]}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total ,sizes, prev, pager, next"
                   :page-sizes="[2, 4]"
                   :currnt-page="this.currentPageNum"
                   :page-size="this.currentPageSize"
                   :total="this.totalNum">
    </el-pagination>

    
  </div>
</template>

<script>
export default {
  name: 'DisplayList',
  components: {},
  data() {
    return {
      currentPageSize: 2,
      currentPageNum: 1,
      productDisplayList: [],
      totalNum: 0,
      tableColumnList: {
        productCoverImage: "封面主图",
        productDesc: "商品描述",
        productType: "商品类型",
        productPrice: "商品价格",
        productQuality: "商品质量",
        isHome: "主页显示",
        productStatus: "状态",
        productCreateTime: "发布时间",
        tool: "操作"
      },
       auditDialogVisible:false

    }
  },
  created() {
  },
  methods: {
    getAllProductDisplayList(currentPageNum, currentPageSize) {
      this.getRequest('/product/api/getAllProductDisplayList', {
        currentPageNum: currentPageNum,
        currentPageSize: currentPageSize
      }).then(res => {
        if (res.code == 200 && res.msg == "success") {
          this.productDisplayList = res.data
          this.totalNum = res.total
        } else {
          this.$alert("错误了", "提示", {
            confirmButtonText: "确定"
          })
        }
      })
    },
    //监听当前页条数变化
    handleSizeChange(val) {
      this.currentPageSize = val;
      // 重新渲染表格
      this.getAllProductDisplayList(this.currentPageNum, this.currentPageSize);
    },
    //监听当前页码变化
    handleCurrentChange(val) {
      this.currentPageNum = val;
      this.getAllProductDisplayList(this.currentPageNum, this.currentPageSize);
    },
    //监听主页显示开关
    changeHomeDisplay(row) {
      console.log(row);
      var productId = row.id;
      var result = row.isHome;
      var isHome = 0;
      if (result) {
        isHome = 1;
      }

      this.putRequest("/product/api/updateProductHomeDisplay", {
        productId: productId,
        isHome: isHome
      }).then(res => {
        console.log(res);
        if (res.code == 200 && res.msg == "success") {
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else {
          this.$message({
            message: "修改失败",
            type: "error"
          });
        }
      })

    } , 
		removeAudit(row){
      console.log(row);
      var productId = row.id ; 
      this.$confirm("确认撤销审核吗","提示",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      }).then(()=>{
        this.deleteRequest("/product/api/removeAudit/"+productId).then((res)=>{
          if(res.code == 200 && res.msg == "success"){
            this.$message({
              type:"success",
              message:"撤销成功"
            })
            this.getAllProductDisplayList(this.currentPageNum,this.currentPageSize);
          }else {
            this.$message({
              type:"error",
              message:"操作失败"
            })
          }
        })
      }).catch(()=>{
        this.$message({
          type:"info",
          message:"已取消"
        })
      })

		}
  },
  mounted() {
    this.getAllProductDisplayList(this.currentPageNum, this.currentPageSize);
  }
}
</script>

<style scoped>
</style>